<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="fragment" content="!">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width,user-scalable=no"
          name="viewport">
    <!--    <link rel="shortcut icon" href="//pics.lvjs.com.cn/mobile/img/lvmama/icon/favicon.ico" type="image/x-icon">-->
    <link rel="stylesheet" type="text/css"
          href="//pics.lvjs.com.cn/mobile/coding/order/static/css/order.min.css?v=201907011735">


    <!---->
    <meta charset="UTF-8">
    <title>门票订单</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/tichetCommon.js"></script>
    <script src="/js/dialog.min.js"></script>
    <!---->


</head>
<script>
    var price;
    //景点id
    var scenicId;

    $(function () {
        //获取门票id
        var productId = getParams().productId;
        var productName;
        //请求数据
        $.ajax({
            type: 'post',
            url: 'http://route.showapi.com/1681-4',
            dataType: 'json',
            data: {
                "showapi_timestamp": formatterDateTime(),
                "showapi_appid": '99840', //这里需要改成自己的appid
                "showapi_sign": '4121c83fea5047e598cca768f06fbe40',  //这里需要改成自己的应用的密钥secret
                "productId": productId
            },

            error: function (XmlHttpRequest, textStatus, errorThrown) {
                alert("操作失败!");
            },
            success: function (result) {
                var list = result.showapi_res_body;
                //console.log(list);
                productName = list.productName;
                scenicId = list.scenicId;
                //渲染数据
                $(".name").renderValues(list);
                //获取门票数量
                price = list.salePrice;
                var priceAll = list.salePrice * $("#pollNumber").val();
                //console.log(priceAll);
                $("#priceAll").html(priceAll);
            }
        });
        var id;
        var loading=false;
        $("#payment").click(function () {
            $("#container").attr("hidden",true);
            $("#mopLoad").attr("hidden",false);
            //获取日期
            var startTime = $("#startTime").val();
            //获取票数
            var bookNumber = $("#pollNumber").val();
            //获取姓名
            var contactName = $("#contactName").val();
            //获取电话
            var contactTel = $("#contactTel").val();
            //获取省份证
            var psptId = $("#psptId").val();
            //获取总价
            var amoutPrice = $("#priceAll").html();
            console.log(startTime);
            console.log(bookNumber);
            console.log(contactName);
            console.log(contactTel);
            console.log(psptId);


            //发送创建订单请求
            $.ajax({
                type: 'post',
                url: 'http://route.showapi.com/1681-5',
                dataType: 'json',
                data: {
                    "showapi_timestamp": formatterDateTime(),
                    "showapi_appid": '99840', //这里需要改成自己的appid
                    "showapi_sign": '4121c83fea5047e598cca768f06fbe40',  //这里需要改成自己的应用的密钥secret
                    "startTime": startTime,
                    "bookNumber": bookNumber,
                    "productId": productId,
                    "contactName": contactName,
                    "contactTel": contactTel,
                    "psptType": "1",
                    "psptId": psptId
                },

                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert("操作失败!");
                },
                success: function (result) {
                    var list = result.showapi_res_body;
                   // console.log(list.orderId);
                    //渲染订单数据
                    $("#payDiv").renderValues(list);
                    $(".amoutPrice").html(amoutPrice);
                    $(".productName").html(productName);
                    $(".fade").attr("hidden",false);
                    //弹出模态框
                    $("#myModal").modal("show");
                    id=list.orderId;
                    loading=true;
                    if (loading){
                        loading=false;
                        //获取订单信息
                        $.ajax({
                            type: 'post',
                            url: 'http://route.showapi.com/1681-6',
                            dataType: 'json',
                            data: {
                                "showapi_timestamp": formatterDateTime(),
                                "showapi_appid": '99840', //这里需要改成自己的appid
                                "showapi_sign": '4121c83fea5047e598cca768f06fbe40',  //这里需要改成自己的应用的密钥secret
                                "orderId":id
                            },

                            error: function(XmlHttpRequest, textStatus, errorThrown) {
                                alert("操作失败!");
                            },
                            success: function(result) {
                                var order=result.showapi_res_body;
                                //.log(list);
                                loading=true;
                                if (loading){
                                    //保存订单信息
                                    var json={
                                        orderId:order.orderId,
                                        amoutPrice:amoutPrice,
                                        orderTime:order.orderTime,
                                        contactTel:order.contactTel,
                                        bookNumber:order.bookNumber,
                                        productId:order.productId,
                                        salePrice:productName,
                                        psptId:order.psptId,
                                        startTime:order.startTime,
                                        scenicId:order.scenicId,
                                        scenicName:order.scenicName,
                                        contactName:order.contactName
                                    }
                                    $.post(baseUrl+"/orders",json,function (data) {
                                        if (data.success){
                                            loading=false;
                                        }
                                    })
                                }

                            }
                        });
                    }
                }
            });



        });

        $("#cancel").click(function () {
            $("#container").attr("hidden",false);
        })
    });

    function addOrSubtract(key) {
        var priceAll = price * $("#pollNumber").val();
        //console.log(priceAll);
        $("#priceAll").html(priceAll);
    }

    //加数量
    function addCount() {
        var number = Number($("#pollNumber").val()) + 1;
        $("#pollNumber").val(number);
        addOrSubtract("*");
    }

    //减数量
    function subtractCount() {
        if ($("#pollNumber").val() - 1 > 0) {
            var number = $("#pollNumber").val() - 1;
            $("#pollNumber").val(number);
            addOrSubtract("*");
        }
    }

    //返回上一页
    function returnDetails() {
        var key = getParams().key;
        window.location.href = "/ticketDetails.html?scenicId=" + scenicId + "&" + "key=" + key;
    }

    //支付
    function paymentSuccess() {
        $(document).dialog({
            type : 'confirm',
            style: 'ios',
            titleText: '窝窝君温馨小提示',
            content: '您的订单已完成,您可以点击下方按钮回到首页',
            buttons: [
                {
                    name: '去首页',
                    callback: function() {
                        window.location.href="/index.html";
                    }
                },
                {
                    name: '返回',
                    callback: function() {
                        var key = getParams().key;
                        window.location.href = "/ticketDetails.html?scenicId=" + scenicId + "&" + "key=" + key;
                    }
                }
            ]
        });
    }


</script>
<body style="background: url('/upload/2.bmp')">

<!-- ngView:  -->
<div id="container" ng-view="" class="ng-scope">
    <div class="ticket-header ng-scope">
        <div class="returnBox" ng-click="fn.goTuan()" onclick="returnDetails()"></div>
        <div class="title">订单填写</div>
    </div>
    <div class="select-ticket ng-scope">
        <div class="main">
            <div class="pro-info">
                <div class="choose-module">
                    <div class="pos-relative">
                        <div class="msg">
                            <div class="left">
                                <!--门票名称-->
                                <div class="name">
                                    <p class="ng-binding" render-html="productName"></p>
                                </div>
                            </div>
                        </div>
                        <p class="splitNotice" ng-click="fn.showNotice()">
                            入园须知 退改说明
                        </p>
                    </div>
                    <div class="date">
                        <p>游玩日期</p>
                        <span></span>
                        <input onclick="WdatePicker({minDate:new Date()})" id="startTime" class="chooseDateTip"
                               placeholder="请选择游玩日期">
                    </div>

                    <div class="number">
                        <p>购买数量</p>
                        <p>
                            <i class="dec-count gray" onclick="subtractCount()"></i>
                            <input type="tel" readonly="readonly" ng-model="model.quantities"
                                   id="pollNumber" class="ng-pristine ng-valid" value="1">
                            <i class="add-count" onclick="addCount()"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="reservation-msg" id="thicketMessage">
                <div class="title">
                    <p>取票人信息</p>
                    <span ng-show="model.isLogin" ng-click="fn.goBooker('CONTACT')" class="ng-hide">
                    </span>
                </div>
                <div class="fill">
                    <div><span>姓名</span><input type="text" id="contactName" placeholder="姓名必须为中文" class="ng-pristine ng-valid">
                    </div>
                    <div>
                        <span>手机号</span>
                        <input type="tel" id="contactTel" placeholder="请输入11位手机号" minlength="11" maxlength="11"
                               class="ng-pristine ng-valid">
                    </div>
                    <div ng-if="model.certName &amp;&amp;" class="ng-scope">
                        <span class="otherCerts">身份证</span>
                        <input type="text" placeholder="用于景区入园等凭证" id="psptId" class="ng-pristine ng-valid">
                    </div>
                </div>
            </div>
        </div>
        <div class="agree">
            <div class="select readContract" ng-click="fn.readContract()"
                 ng-class="{'readContract' : model.readContract}"></div>
            <div class="already" style="margin-bottom:30px;">
                <p>已阅读并同意
                    <a ng-click="fn.runStatis('contract')">
                        <span class="notice ng-binding">驴窝窝旅游网预订条款</span>
                    </a>
                </p>
            </div>
        </div>
        <div class="bottom">
            <div class="pay" ng-click="fn.showFee()">
                <p>总价：
                    <i ng-show="model.oughtPay">¥</i>
                    <i ng-show="model.oughtPay" id="priceAll"></i>
                </p>
            </div>
            <a id="payment">
                <div class="after loading-grey">去支付</div>
            </a>
        </div>
    </div>
    <!--详细,可用模态框-->
    <div class="notice-tanchuang ng-scope ng-hide" ng-show="model.showNotice">
        <div class="main">
            <div class="title">
                <p>门票预订须知</p>
                <span class="close" ng-click="fn.closeNotice()">×</span>
            </div>
            <div class="content">
                <h3>费用包含：</h3>
                <p ng-bind-html="model.priceIncludes" class="ng-binding">1.上海迪士尼乐园下午场成人票1张；<br>2.价值30元代金券1张。</p>
                <h3>入园须知：</h3>
                <p ng-bind-html="model.beforeTralNotice" class="ng-binding">入园时间：16:00～20:00<br>入园地点：上海市浦东新区上海迪士尼乐园<br>入园方式：凭下单时预留的身份证入园；*
                    该门票无需取票，可直接入园<br>有效期：指定游玩日1天内有效 <br></p>
                <h3>重要提示：</h3>
                <p ng-bind-html="model.importantTips" class="ng-binding">其他：1、 “酷爽下午场票”
                    为指定日票，游客在购票时需选定入园日期（入园日期须为2019年6月17日至8月31日期间），且仅可在购票时所选定的日期当天入园，入园时间须为下午四点后。产品内所含代金券为指定日代金券，使用日期与游客所购买的酷爽下午场票的入园日期须一致，且仅可在入园日期当天使用。
                    <br>2、 “酷爽下午场票-儿童/老人票”可补差价升级为“酷爽下午场票-成人票”。
                    “酷爽下午场票”可在入园日当日补差价升级为年卡。2019年6月17日至8月31日每天17：00之前，持票人本人凭酷爽下午场票票在游园当日升级年卡，有机会可获得一个当日指定游玩景点的迪士尼尊享卡。
                    <br>3、 “酷爽下午场票”仅可在适用入园日期的范围内进行更改。游客可在特定入园日期尚有余票且补足票价差额的前提下，于入园日前3天20点前更换两次等值或者更高价值的指定日门票。
                    <br>4、 游客入园后可通过上海迪士尼官方微信公众号-权益中心绑定扫描门票二维码，领取价值人民币30元的代金券。代金券仅限门票持有人本人使用。
                    <br>5、
                    产品内所含代金券仅可在以下适用的餐厅购买指定夏日特饮或者在帕帕里诺冰激凌购买指定款冰激凌时使用，且每次仅可使用一张券，不找零，不兑现，超过本券金额部分由持券人自行支付。本券一经使用即作废，同一张券不可重复使用。
                    <br>6、 本产品内所含餐券仅可在入园日下午4点以后及适用餐厅和小食亭的运营时间内使用,本券适用于以下餐厅及小食亭（适用餐厅及小食亭的运营时间请以上海迪士尼度假区官方App当日公布为准）。
                    <br>指定夏日特饮供应点：米奇好伙伴美味集市、星露台餐厅、皮诺丘乡村厨房、老藤树食栈、
                    巴波萨烧烤、部落丰盛堂、漫月食府、海怪小吃、花间美味、魔法师秘制小食、奇奇蒂蒂果摊、水虎鱼大口咬、提摩太小吃、土图嘉风味、旋味、吟游风味
                    <br>指定冰激凌供应点：帕帕里诺冰激凌
                    <br>7、 绑定门票且成功领取代金券后，请凭代金券生成的唯一二维码支付套餐费用。请妥善保管二维码凭证。
                    <br>8、
                    为保证顺利入园，购票人须携带并出示本人购票时所使用的身份证件原件以及购票凭证，从乐园主入口入园。同一订单下的所有游客在首次入园时须同时入园。购票时所使用的身份证件的持有人须作为该订单下的一名游客，与该订单下的其他同行人员一同入园。
                    <br>9、 “酷爽下午场票”不可转让、不可退款。购票时所使用的身份证件信息不可变更，除非法律另有规定。
                    <br>10、不满十六周岁的游客须由十六周岁（含）及以上游客陪同入园。
                    <br>11、产品销售时间：2019年6月17日上午 8:00 – 2019年8月31日上午9：00数量有限，售完为止。</p>
                <h3>退改说明：</h3>
                <p ng-bind-html="model.refundNotice" class="ng-binding">本商品预定后不支持退改，敬请谅解。</p>
            </div>
        </div>
    </div>
    <div class="cost-detail ng-scope ng-hide" ng-show="model.showFee" ng-click="fn.showFee()">
        <div class="main">
            <h3>费用明细</h3>
            <div>
                <p>门票</p>
                <span><i>¥</i><i class="ng-binding">329</i></span>
            </div>
            <div class="cost-list">
                <p class="ng-binding">酷爽下午场成人票（16:00后入园）</p>
                <span><i class="ng-binding">¥329/人</i><i class="ng-binding">x1</i></span>
            </div>
        </div>
    </div>
    <div class="fullmask ng-scope ng-hide" ng-click="fn.hideMask()"
         ng-show="model.maskShow || model.selectCertShow"></div>
    <!--选择证件-->
    <div class="sortType ng-scope ng-hide" ng-show="model.selectCertShow"
         ng-class="{'sortTypeAnim' : model.selectCertShow}">
        <!-- ngRepeat: type in model.ableCertTypes track by $index --><p
            ng-class="{'selected' : type === model.certName}" ng-repeat="type in model.ableCertTypes track by $index"
            ng-click="fn.selectCert(type)" class="ng-binding ng-scope selected">身份证</p>
        <!-- end ngRepeat: type in model.ableCertTypes track by $index --><p
            ng-class="{'selected' : type === model.certName}" ng-repeat="type in model.ableCertTypes track by $index"
            ng-click="fn.selectCert(type)" class="ng-binding ng-scope">护照</p>
        <!-- end ngRepeat: type in model.ableCertTypes track by $index --><p
            ng-class="{'selected' : type === model.certName}" ng-repeat="type in model.ableCertTypes track by $index"
            ng-click="fn.selectCert(type)" class="ng-binding ng-scope">港澳通行证</p>
        <!-- end ngRepeat: type in model.ableCertTypes track by $index --><p
            ng-class="{'selected' : type === model.certName}" ng-repeat="type in model.ableCertTypes track by $index"
            ng-click="fn.selectCert(type)" class="ng-binding ng-scope">台胞证</p>
        <!-- end ngRepeat: type in model.ableCertTypes track by $index --><p
            ng-class="{'selected' : type === model.certName}" ng-repeat="type in model.ableCertTypes track by $index"
            ng-click="fn.selectCert(type)" class="ng-binding ng-scope">回乡证</p>
        <!-- end ngRepeat: type in model.ableCertTypes track by $index -->
    </div>
    <div class="sortType ng-scope ng-hide" ng-show="model.maskShow" ng-class="{'sortTypeAnim' : model.maskShow}"
         ng-click="fn.selectType($event)">
    </div>
    <div class="matte ng-scope ng-hide" ng-show="model.showErrMsg" ng-class="{'errHide' : model.showErrMsg}">
        <div class="small-pop ng-binding">

        </div>
    </div>
    <input type="hidden" id="triggerErr" ng-click="fn.triggerErr()" class="ng-scope">
    <div class="lvOrder-mask ng-scope ng-hide" ng-show="model.insureNoticeShow" ng-click="fn.showInsureNotice()"></div>

</div>
<div ng-controller="errCtrl" class="ng-scope">
    <div class="matte ng-hide" ng-show="showErrMsg" ng-class="{'errHide' : showErrMsg}">
        <div class="small-pop ng-binding" ng-bind="errorMsg"></div>
    </div>
</div>
<script async="" src="https://pics.lvjs.com.cn/mobile/lib/sensorsdata/sensorsdata.min.js"></script>
<script type="text/javascript" src="https://pics.lvjs.com.cn/mobile/plugins/nativeJs/login/1.2/build.min.js"></script>
<script src="https://pics.lvjs.com.cn/mobile/plugins/nativeJs/spinWheel/2.0/build.min.js"></script>
<script src="//pics.lvjs.com.cn/mobile/lib/js/angular-1.2.25.js?v=201704101123"></script>
<script src="//pics.lvjs.com.cn/mobile/lib/plugins/public/1.0/public-1.7.2.min.js"></script>


<!--支付模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="background: url('/upload/2.bmp')" hidden>
    <div class="modal-dialog" role="document" style="background: url('/upload/2.bmp')">
        <div class="modal-content" style="background: url('/upload/2.bmp')">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">订单支付</h4>
            </div>
            <div class="modal-body" id="payDiv" >

                <div class="container pt45">
                    <div class="pay" ng-click="fn.showFee()">
                        <p style="font-weight: bold">在线支付：
                            <i ng-show="model.oughtPay" style="color: #ff0006">¥</i>
                            <i ng-show="model.oughtPay" class="amoutPrice" style="color: #ff0006"
                               render-html="amoutPrice"></i>
                        </p>
                    </div>
                    <div class="pay-order">
                        <div class="order1 hide">
                            <p><label class="first" style="font-weight: bold">订单号: </label><span render-html="orderId" id="orderIds"></span></p>
                            <p><label style="font-weight: bold">产品名称: </label><span class="productName"></span></p>
                            <p><label style="font-weight: bold">游玩时间: </label><span render-html="startTime"></span></p>
                            <p><label style="font-weight: bold">入园方式: </label><span render-html="enterCertificateType"></span></p>
                        </div>
                    </div>
                    <div style="margin-top:20px;" class="radio-wrapper">
                        <label class="radio-wrapper radio-border"
                               :style="{'border-color':((pickedPay === 'alipay')?'#409eff':'#d7dae2')}">
                            <img class="icon" src="/img/alipay.png" onclick="paymentSuccess();">
                            <span class="text">支付宝支付</span>
                        </label>
                        <label class="radio-wrapper radio-border"
                               :style="{'border-color':((pickedPay === 'wechat')?'#409eff':'#d7dae2'),'margin-left':'20px'}">
                            <img class="icon" src="/img/wechat.png" onclick="paymentSuccess();">
                            <span class="text">微信支付</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>